<template>
  <view :class="['goodsList', headerClass ? 'on' : '']">
    <u-sticky :h5NavHeight="0">
      <singleHeader pageTitle="秒杀专场"></singleHeader>
    </u-sticky>

    <pageHeader :countDown="countDown"></pageHeader>

    <pageGoods
      :goodsList="list"
      @clickBuyBtn="clickBuyBtn"
      @toGoodDetail="toGoodDetail"
    ></pageGoods>

    <toolsMore :status="moreStatus"></toolsMore>

    <goodsAddCart :good="goodsOfAdd"></goodsAddCart>
  </view>
</template>

<script>
import singleHeader from "@/components/diySystemPage/components/singleHeader/index.vue";
import goodsAddCart from "@/components/diyNew/goodsAddCart/index.vue";
import pageGoods from "./components/page-goods.vue";
import pageHeader from "./components/page-header.vue";

import toolsMore from "@/components/tools/tools-more.vue";
import { seckillActivity } from "@/api/seckill";

let timer = null;

export default {
  components: {
    goodsAddCart,
    toolsMore,
    pageGoods,
    pageHeader,
    singleHeader,
  },

  onLoad({ activeId }) {
    this.activeId = activeId;
    this.clearData();
  },

  data() {
    return {
      status: 1,
      list: [],
      moreStatus: 1,
      page: 1,
      isEnd: false,

      headerClass: false,
      countDown: [],
      goodsOfAdd: {}, // 添加到购物车的商品
    };
  },

  computed: {},

  watch: {
    // list: {
    //   handler(val) {
    //     if (val.every((el) => el.checked)) {
    //       this.isAll = true;
    //     } else {
    //       this.isAll = false;
    //     }
    //   },
    //   deep: true,
    // },
  },

  onShow() {
    // this.Emit.$on("filter", this.indexFilter);
  },

  onHide() {
    // this.Emit.$off("filter");
  },

  onUnload() {
    clearInterval(timer);
  },

  methods: {
    // 点击添加购物车按钮回调
    clickBuyBtn(e) {
      let item = e.item;
      let goods = Object.assign({}, item);
      this.goodsOfAdd = goods;
      setTimeout(() => {
        this.goodsOfAdd = {};
      }, 1);
    },

    clearData() {
      this.page = 1;
      this.isEnd = false;
      this.list = [];

      this.seckillActivity();
    },

    seckillActivity() {
      let { list: oldList, page: pageNo, activeId } = this;

      this.moreStatus = 2;
      seckillActivity({
        activeId,
        pageNo,
        pageSize: 20,
      })
        .then((res) => {
          uni.stopPullDownRefresh();
          this.moreStatus = 1;

          if (res.code === 0) {
            let { totalCount } = res.data,
              {
                seckill_activity_goods: list,
                end_time,
                start_time,
              } = res.data.list[0],
              count = parseInt(totalCount);

            if (list.length) {
              oldList.push(...list);
              this.page = this.page + 1;
            }

            if (oldList.length >= count) {
              this.isEnd = true;
              this.moreStatus = 3;
            }

            clearInterval(timer);
            this.countDownDataItem(end_time * 1000, start_time * 1000);
            timer = setInterval(() => {
              this.countDownDataItem(end_time * 1000, start_time * 1000);
            }, 1000);
          }
        })
        .catch(() => {
          this.moreStatus = 1;
          uni.stopPullDownRefresh();
        });
    },

    formatNumber(n) {
      n = n.toString();
      return n[1] ? n : "0" + n;
    },

    countDownDataItem(endTime, startTime) {
      let currentTime = new Date().getTime(),
        activeTime = endTime,
        item = [],
        is = 0; // 0距离结束 1距离开始

      if (currentTime < startTime && startTime - currentTime > 0) {
        // 如果活动未开始，对时间进行处理
        activeTime = startTime;
        is = 1;
      }

      if (activeTime - currentTime > 0) {
        // 如果活动未结束，对时间进行处理

        let time = (activeTime - currentTime) / 1000;

        // 获取天、时、分、秒
        let day = parseInt(time / (60 * 60 * 24)),
          hou = this.formatNumber(parseInt((time % (60 * 60 * 24)) / 3600)),
          min = this.formatNumber(
            parseInt(((time % (60 * 60 * 24)) % 3600) / 60)
          ),
          sec = this.formatNumber(
            parseInt(((time % (60 * 60 * 24)) % 3600) % 60)
          );

        item = [day, hou, min, sec, is];
      } else {
        item = [];
        clearInterval(timer);

        if (!is) {
          this.countDownDataItem(endTime, startTime);
        } else {
          this.$utils.showModal("提示", "该活动已结束", false, () => {
            uni.navigateBack();
          });
        }
      }

      this.countDown = item;
    },
  },

  onPageScroll({ scrollTop }) {
    if (scrollTop >= 50) {
      this.headerClass = true;
    } else {
      this.headerClass = false;
    }
  },

  onReachBottom() {
    if (this.isEnd) {
      return;
    }

    this.seckillActivity();
  },

  onPullDownRefresh() {
    this.clearData();
  },
};
</script>

<style lang="less" scoped>
.goodsList {
  position: relative;
  background: #fff;
  min-height: 100vh;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

::v-deep {
  .page-header {
    background: transparent !important;
    -webkit-transition: 0.3s linear;
    transition: 0.3s linear;

    .header-content,
    .icon-fanhui {
      color: #fff !important;
      -webkit-transition: 0.3s linear;
      transition: 0.3s linear;
    }
  }
}

.on {
  ::v-deep {
    .page-header {
      background: #fff !important;

      .header-content,
      .icon-fanhui {
        color: #000000 !important;
      }
    }
  }
}
</style>
